<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>配合v-model使用事件</title>
        <style>
            .input-wrapper {
                display: flex;
                border: 1px solid #dedede;
                border-radius: 5px;
                margin: 10px 0;
                width: 300px;
                height: 50px;
                line-height: 50px;
            }
            .input-wrapper>span {
                flex-basis: 80px;
                text-align: center;
            }
            .input-wrapper>input {
                width: 220px;
                border: none;
                outline: none;
            }
        </style>
    </head>
    <div>

        <h3>配合v-model使用事件</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const CustomInput = {
                props: [ 'label', 'type', 'modelValue' ],
                emits: [ 'update:modelValue' ],
                template: `<div class="input-wrapper">
                              <span>{{label}}</span>
                              <input :type="type" :value="modelValue" @input="change">
                           </div>`,
                methods: {
                    change(evt){
                        console.log('change');
                        this.$emit('update:modelValue', evt.target.value );
                    }
                }
            }

            const App = {
                components: {
                    CustomInput
                },
                template: `<div class="wrapper">
                              <CustomInput v-model="username" 
                                           label="用户名" 
                                           type="text"></CustomInput>
                              <CustomInput :model-value="username"
                                           @update:modelValue="changeUsername"
                                           label="用户名" 
                                           type="text"></CustomInput>
                              <CustomInput v-model="password" 
                                           label="密码" 
                                           type="password"></CustomInput>
                              <hr>
                              <p>
                                 username: {{username}} , 
                                 password: {{password}}
                              </p>
                            </div>`,
                data() {
                    return {
                        username: 'afang',
                        password: '123'
                    }
                },
                methods: {
                    changeUsername(value){
                        console.log('changeUsername');
                        this.username = value;
                    }
                }
            }
            
            const app = Vue.createApp(App);
            app.mount('#application');
        </script>
    </div>
</html>